<template>
	<view class="user clearfix  bg-shop hv100">
		<cu-custom bgColor="bg-white " isBack>
			<block slot="content">编辑资料</block>
		</cu-custom>
		<form @submit="formSubmit" class="block sm-border border-width-1  mt5 ">
			<view class="cu-form-group  bg-white color-black  solid-bottom py15" @click="ShowModal('chooseImageModal')">
				<view class="title">头像</view>
				<view class=" flex  align-center" >
					<image class="block block40 round mr10" :src="userInfo.headerPic" ></image>
					<text class="color-info cuIcon-right f14"></text>
				</view>
			</view>
			<view class="cu-form-group mt1s bg-white color-black  solid-bottom py15">
				<view class="title">昵称</view>
				<view class="flex align-center justify-end" @click="pushPage('/pages/user/changename')">
					<text class="mr10 color-info">{{ userInfo.niName }}</text>
					<text class="color-info cuIcon-right f14"></text>
				</view>
			</view>
			<view class="cu-form-group mt1s bg-white color-black  solid-bottom py15">
				<view class="title">身份</view>
				<view class="flex align-center justify-end" @click="pushPage('/pages/user/changename')">
					<text class="mr10 color-info">{{userInfo.teamName}}</text>
				</view>
			</view>
			<view class="cu-form-group mt1s bg-white color-black  solid-bottom py15"  @click="userweixin">
				<view class="title">绑定微信</view>
				<view class="flex align-center justify-end">
					<text class="color-info cuIcon-right f14" v-if="userInfo.wxBind==0"></text>
					<text class="mr10 color-info" v-else>已绑定</text>
				</view>
			</view>
		</form>
		<!--<view class="discenter px15 wp100 abous bo1">
			<view class="discenter color-white bgjianbian h40 radius-30 wp100" @click="handleLogout">退出登录</view>
		</view>-->
		<image-cropper :src="tempFilePath" crop-fixed @confirm="confirm" @cancel="cancel"></image-cropper>
		
		<view @touchmove.stop.prevent @click="HideModal" class="cu-modal bottom-modal" :class="modalName == 'chooseImageModal' ? 'show' : ''">
			<view class="cu-dialog bg-transparent px15 py10" @tap.stop>
				<view class="sm-border radius ovh">
					<view class="flex flex-direction align-center  ">
						<view @click="updateAvatar('camera')" class="cu-btn bg-white wp100 h50 lg f14 block color-black">{{ i18n.chooseImage[0] }}</view>
						<view class="discenter wp100 px15 bg-white">
							<view class="box-line   wp100"></view>
						</view>
						<view @click="updateAvatar('album')" class="cu-btn bg-white wp100 lg h50 f14 block color-black">{{ i18n.chooseImage[1] }}</view>
					</view>
				</view>
				<view @click="HideModal" class="cu-btn lg bg-white f14 block  color-black mt10 h50 radius">
					<view class=" wp100 h50 bg-white discenter">
						{{ i18n.cancel }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import uploadFile from '@/mixins/uploadFile'
import ImageCropper from '@/components/invinbg-image-cropper/invinbg-image-cropper.vue'
export default {
	mixins: [uploadFile],
	components: { ImageCropper },
	data() {
		return {
			tempFilePath: '',
			weixinid:''
		}
	},
	onLoad(e) {
		//this.getUser()
	},
	computed: {
		...mapState(['userInfo','baseURL'])
	},
	onShow() {
		if (this.update) {
			this.getUser()
			this.setUpdate(false)
		}
	},
	methods: {
		...mapActions(['logout','getUser']),
		handleLogout() {
			this.logout()
			uni.reLaunch({ url: '/pages/login/login' })
		},
		async updateAvatar(sourceType) {
			this.HideModal()
			let [err, res] = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: [sourceType]
			})
			if (res) {
				// #ifdef H5
				this.headerPic = res.tempFilePaths.shift()
				this.formSubmit()
				// #endif
				// #ifndef H5
				this.tempFilePath = res.tempFilePaths.shift()
				//this.formSubmit()
				// #endif
			}
		},
		confirm(e) {
			this.tempFilePath = ''
			this.headerPic = e.detail.tempFilePath
			this.picchange = true
			this.formSubmit()
		},
		userweixin(){
			if(this.userInfo.wxBind!=0){
				uni.showToast({
					title:'您已经绑定过微信了',
					icon:'none'
				})
				return false
			}else{
				let _this = this;
				uni.login({
				    provider: 'weixin',
				    success: function (loginRes) {
						
					    uni.getUserInfo({
						  provider: 'weixin',
						  success: function (infoRes) {
							//console.log('用户昵称为：' + infoRes.userInfo.nickName);
							//console.log('用户ID：' + infoRes.userInfo.openId);
							//console.log('用户头像：' + infoRes.userInfo.avatarUrl);
							_this.weixinid=infoRes.userInfo.openId
							_this.bangweixin()
						  }
						});
				    },
					fail: function (loginRes) {
				       console.log(loginRes.authResult);
				    },
				});
			}
			
		},
		async bangweixin(){
			let {data} = await this.$http.post('user.saveinfo', {openId:this.weixinid}, { tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 } })
		},
		cancel() { 
			this.tempFilePath = ''
		},
		
		async formSubmit(e) {
			let formData = {  }
			if (this.headerPic) {
				let {
					data: { updateToken, updateUrl, prefixUrl }
				} = await this.$http.post('user.getQnToken', {}, { tipConfig: { storeLoading: true } })
				let img = await this.qnUploadFile({ url: updateUrl, prefixUrl, files: this.headerPic, formData: { token: updateToken } })
				formData.headerPic = img[0]
			}
			await this.$http.post('user.saveinfo', formData, { tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 } })
		}
		
	}
}
</script>

<style lang="less">
.bg-tuichu {
	background-color: #047283 !important;
}
.box-line {
	width: calc(100% - 40rpx);
	height: 1px;
	background-color: #F7F7F7;
}
.bg-pic {
	background-color: #13212b !important;
}
.bb1 {
	border-bottom: 0.5px solid #1b2228 !important;
}
.mt1s{
	margin-top: 1rpx;
}
</style>
